<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">
      <el-form-item label="存储类型" class="flex-50" prop="ossType" >
        <el-select v-model="dataInfo.ossType" class="cms-width" :disabled="true">
          <el-option label="腾讯云" :value="1">腾讯云</el-option>
          <el-option label="阿里云" :value="2">阿里云</el-option>
          <el-option label="七牛云" :value="3">七牛云</el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="flex-50"></el-form-item>
      <el-form-item label="Bucket名" class="flex-50" prop="bucketName">
        <el-input v-model="dataInfo.bucketName" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="AppId" class="flex-50" prop="ossAppId">
        <el-input v-model="dataInfo.ossAppId" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="appKey" class="flex-50" prop="appKey">
        <el-input v-model="dataInfo.appKey" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="secretId" class="flex-50" prop="secretId">
        <el-input v-model="dataInfo.secretId" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="访问域名" class="flex-50" prop="accessDomain">
        <el-input v-model="dataInfo.accessDomain" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="备注名字" class="flex-50" prop="name">
        <el-input v-model="dataInfo.name" class="cms-width"></el-input>
      </el-form-item>
      <el-form-item label="阿里云endPoint" class="flex-50" prop="endPoint">
        <el-input v-model="dataInfo.endPoint" class="cms-width"></el-input>
      </el-form-item>
      <div class="form-footer">
        <el-button v-if="this.id==0" type="warning" @click="add(true)">添加并继续保存
        </el-button>
        <el-button v-if="this.id==0" type="primary" @click="add(false)">添加
        </el-button>
        <el-button v-if="this.id!=0" type="primary" @click="update()">提交
        </el-button>
        <el-button type="info" @click="$reset">重置</el-button>
      </div>
    </el-form>
  </section>
</template>

<script>
  import listMixins from '@/mixins/form';
  import axios from "axios";
  import va from "@/rules";

  export default {
    mixins: [listMixins],
    data() {
      let self = this;
      let required = va.required();
      return {
        rules: {
          //校验规则
          bucketName: [required],
          ossType: [required],
          name: [required],
        },

      };
    },
    methods: {
      getDataInfo(id, type) {
        this.loading = true;
        if (type == 'update') {
          axios.post(this.$api.ossConfigGet, {id: id}).then(res => {
            if (res.code == '200') {
              this.dataInfo = res.body;
            }
          }).catch(error => {
            console.log(error)
          })
        }
        this.loading = false;
      },
      update() {
        this.updateDataInfo(this.$api.ossConfigUpdate, this.dataInfo, "pageList");
      },
      add(state) {
        this.saveDataInfo(state, this.$api.ossConfigSave, this.dataInfo, "pageList");
      }
    },
    created() {
      this.getDataInfo(this.id, this.type);
    }
  };
</script>

<style>

</style>
